<template>
    <page-wrapper>
        <template v-if="dict.messageType.length">
            <a-tabs v-model="form.messageType">
                <a-tab-pane v-for="messageType in dict.messageType" :key="messageType.dictValue" :tab="messageType.dictValue"> </a-tab-pane>
            </a-tabs>
        </template>
        <table-search @search="search(1)" :isSearch="isSuper" :isExtra="isSuper" :isControl="false" @reset="reset()">
            <template slot="extra">
                <a-button
                    class="filter-item"
                    type="danger"
                    icon="delete"
                    @click="remove()"
                    :disabled="!selectionBox.length"
                    >删除</a-button
                >
            </template>
        </table-search>
        <table-list
            :bordered="false"
            :loading="loading"
            :columns="columns"
            rowKey="messageId"
            :pagination="pagination"
            :selection="isSuper ? selection : null"
            :data="list"
        >
            <template slot="index" slot-scope="{ index }">
                <span>{{ (form.page - 1) * form.size + index + 1 }}</span>
            </template>
            <template slot="messageStatus" slot-scope="{ text }">
                <list-status :data="status" :value="text.messageStatus" type="value" />
            </template>
        </table-list>
    </page-wrapper>
</template>
<script>
import table from '@/mixins/table';
import { columns } from './columns';
import { status } from '@/views/home/components/dictionary';
import { mapState } from 'vuex';
import { remoteMessageList,deleteInfo } from '@/api/home'
import { getCache } from '@/utils/session';

export default {
    name: 'MessageList',
    mixins: [table],
    dicts:['messageType'],
    data() {
        let userInfo = getCache('userInfo') || { userId: '' };
        let { userId } = userInfo;
        return {
            columns,
            status,
            form: {
                userId,
                messageType: ''
            }
        };
    },
    computed: {
        ...mapState({
            isSuper: state => state.user.accountInfo.roleName == 'superAdmin'
        })
    },
    watch:{
        'form.messageType':{
            handler(){
                this.search(1)
            },
            deep:true
        },
        'dict.messageType':{
            handler(value){
                if(value.length){
                    this.form.messageType = value[0].dictValue
                }
            },
            deep:true,
        }
    },
    created(){
        this.search(1)
    },
    methods: {
        async search(page) {
            this.loading = true;
            if (page) {
                this.form.page = page;
            }
            try {
                let res = await remoteMessageList(this.form);
                let {list,total} = res.data;
                this.list = list;
                this.total = total
            } finally {
                this.loading = false;
            }
        },
        //删除
        remove(item = '') {
            this.$confirm({
                title: '提示',
                content: '确定要删除消息？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    try {
                        let ids = [];
                        if (item) {
                            ids = [item.messageId];
                        } else {
                            let selectionBox = this.selectionBox;
                            selectionBox.map(async item => {
                                ids.push(item.messageId);
                            });
                        }
                        await deleteInfo({ ids });
                        this.$message.success('删除成功!');
                        this.search(1);
                    } catch (err) {}
                },
                onCancel() {}
            });
        }
    }
};
</script>
